<template>
	<div>
		<div
			v-for="(api,index) in apis"
			:key="index"
			:id="'anchor'+index"
			class="part">
			<div class="part-title">{{api.name}}</div>
			<div class="part-info">{{api.info}}</div>
			<Code :code="api.code"/>
			<QMarkupTable
				v-for="(tab,j) in api.tabs"
				:key="j"
				class="args-table">
				<thead>
				<tr>
					<th colspan="4" class="title">{{tab.name}}</th>
				</tr>
				<tr>
					<th class="text-left">参数</th>
					<th class="text-left">说明</th>
					<th class="text-left">类型</th>
					<th class="text-left">默认值</th>
				</tr>
				</thead>
				<tbody>
				<tr
					v-for="(arg,i) in tab.args"
					:key="i">
					<td>{{arg.name}}</td>
					<td>{{arg.info}}</td>
					<td>{{arg.type}}</td>
					<td>{{arg.def}}</td>
				</tr>
				</tbody>
			</QMarkupTable>
		</div>
	</div>
</template>

<script>
import {QMarkupTable} from 'quasar';
import Code from '@/components/pc/code';

export default {
	name:'UtilsTemplate',
	components:{
		QMarkupTable,
		Code,
	},
	data(){
		return {
			apis:[],
		};
	},
	created(){
		this.$root.anchors=this.apis.map(function(api,index){
			return {
				id:'anchor'+index,
				name:api.name,
			};
		});
	},
};
</script>

<style lang="scss">

</style>
